<template>
  <div class="Inventory-home">
    <div class="title"><i class="el-icon-s-cooperation"></i>库存信息</div>
    <div class="right">
      <div class="date" v-if="InventoryInfo.integratedInventoryInfo">
        数据来源日期：{{
          InventoryInfo.integratedInventoryInfo[0].updateTime | filtData
        }}
      </div>
      <el-button
        type="text"
        size="mini"
        icon="el-icon-search"
        @click="open = true"
        >详情</el-button
      >
    </div>
    <div class="list">
      <ul class="cuurent">
        <li>BU</li>
        <li>累计周转天数</li>
        <li>上周周转天数</li>
      </ul>
      <ul
        v-for="(item, index) in InventoryInfo.integratedInventoryInfo"
        :key="index"
      >
        <li>{{ item.bu }}</li>
        <li>{{ Math.round(item.turnoverRateSum) }}</li>
        <li>{{ Math.round(item.turnoverRateWeek) }}</li>
      </ul>
    </div>
    <el-dialog title="库存总览" :visible.sync="open" fullscreen center>
      <div class="dialog-right" v-if="InventoryInfo.buInventoryInfo">
        数据来源日期：{{
          InventoryInfo.integratedInventoryInfo[0].updateTime | filtData
        }}
      </div>
      <el-table
        style="margin-top: 5px"
        class="table-bottom"
        :data="InventoryInfo.buInventoryInfo"
        :header-cell-style="getRowClass"
        border
        max-height="300"
      >
        <el-table-column prop="bu" label="BU"> </el-table-column>
        <el-table-column prop="planStatus" label="采购计划"> </el-table-column>
        <el-table-column prop="itemSum" label="项目数量"> </el-table-column>
        <el-table-column prop="itemRatio" label="项目占比">
          <template slot-scope="scope"> {{ scope.row.itemRatio *100 | keepTwoDecimal }}% </template>
        </el-table-column>
        <el-table-column prop="noAmount" label="未清金额">
          <template slot-scope="scope"> ￥{{ scope.row.noAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="szAmount" label="深圳仓金额">
          <template slot-scope="scope"> ￥{{ scope.row.szAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="fbaAmount" label="FBA金额">
          <template slot-scope="scope"> ￥{{ scope.row.fbaAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="total" label="合计">
          <template slot-scope="scope"> ￥{{ scope.row.total | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="ratio" label="占比">
          <template slot-scope="scope"> {{ scope.row.ratio  *100 | keepTwoDecimal }}% </template>
        </el-table-column>
      </el-table>

      <el-table
        class="table-bottom"
        :data="InventoryInfo.planInventoryInfo"
        :header-cell-style="getRowClass"
        border
      >
        <el-table-column prop="planStatus" label="采购计划"> </el-table-column>
        <el-table-column prop="itemSum" label="项目数量"> </el-table-column>
        <el-table-column prop="itemRatio" label="项目占比">
          <template slot-scope="scope"> {{ scope.row.itemRatio  *100 | keepTwoDecimal }}% </template>
        </el-table-column>
        <el-table-column prop="noAmount" label="未清金额">
          <template slot-scope="scope"> ￥{{ scope.row.noAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="szAmount" label="深圳仓金额">
          <template slot-scope="scope"> ￥{{ scope.row.szAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="fbaAmount" label="FBA金额">
          <template slot-scope="scope"> ￥{{ scope.row.fbaAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="total" label="合计">
          <template slot-scope="scope"> ￥{{ scope.row.total | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="ratio" label="占比">
          <template slot-scope="scope"> {{ scope.row.ratio  *100 | keepTwoDecimal }}% </template>
        </el-table-column>
      </el-table>

      <el-table
        :data="InventoryInfo.integratedInventoryInfo"
        :header-cell-style="getRowClass"
        border
      >
        <el-table-column prop="bu" label="BU" fixed width="130">
        </el-table-column>
        <el-table-column prop="fbaAmount" label="FBA金额" width="120">
          <template slot-scope="scope"> ￥{{ scope.row.fbaAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="revenueMonth" label="月累计营收" width="130">
          <template slot-scope="scope">
            ￥{{ scope.row.revenueMonth | formatAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="costOfSalesSum" label="累计销售成本" width="130">
          <template slot-scope="scope">
            ￥{{ scope.row.costOfSalesSum | formatAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="revenueWeek" label="上周营收" width="120">
          <template slot-scope="scope">
            ￥{{ scope.row.revenueWeek | formatAmount }}
          </template>
        </el-table-column>
        <el-table-column
          prop="costOfSalesWeek"
          label="上周销售成本"
          width="120"
        >
          <template slot-scope="scope">
            ￥{{ scope.row.costOfSalesWeek | formatAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="noAmount" label="未清金额" width="120">
          <template slot-scope="scope"> ￥{{ scope.row.noAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="szAmount" label="深圳仓金额" width="120">
          <template slot-scope="scope"> ￥{{ scope.row.szAmount | formatAmount }} </template>
        </el-table-column>
        <el-table-column prop="totalInventory" label="合计库存" width="120">
          <template slot-scope="scope">
            ￥{{ scope.row.totalInventory | formatAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="unpaidInventory" label="库存+未清" width="120">
          <template slot-scope="scope">
            ￥{{ scope.row.unpaidInventory | formatAmount }}
          </template>
        </el-table-column>
        <el-table-column
          prop="inventoryTurnoverRateSum"
          label="累计库存周转天数"
          width="130"
        >
          <template slot-scope="scope">
            {{ Math.round(scope.row.inventoryTurnoverRateSum) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="unpaidTurnoverRateSum"
          label="累计未清周转天数"
          width="130"
        >
          <template slot-scope="scope">
            {{ Math.round(scope.row.unpaidTurnoverRateSum) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="turnoverRateSum"
          label="累计周转天数"
          width="120"
        >
          <template slot-scope="scope">
            {{ Math.round(scope.row.turnoverRateSum) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="inventoryTurnoverRateWeek"
          label="上周库存周转天数"
          width="130"
        >
          <template slot-scope="scope">
            {{ Math.round(scope.row.inventoryTurnoverRateWeek) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="unpaidTurnoverRateWerk"
          label="上周未清周转天数"
          width="130"
        >
          <template slot-scope="scope">
            {{ Math.round(scope.row.unpaidTurnoverRateWerk) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="turnoverRateWeek"
          label="上周周转天数"
          min-width="110"
        >
          <template slot-scope="scope">
            {{ Math.round(scope.row.turnoverRateWeek) }}
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="open = false" size="mini" class="button-right"
        >关闭</el-button
      >
    </el-dialog>
  </div>
</template>
<script>
import { inventory } from "@/api/dashboard";
import { formatDate } from "assets/js/date";
export default {
  data() {
    return {
      InventoryInfo: {},
      open: false,
    };
  },
  filters: {
    filtData(time) {
      if (time) {
        let date = new Date(time);
        return formatDate(date, "yyyy-MM-dd");
      }
    },

    //四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
    keepTwoDecimal(num) {
      var result = parseFloat(num)
      if (isNaN(result)) {
        return false
      }
      result = Math.round(num * 100) / 100
      return result
    },

    formatAmount(data) {
      if (parseFloat(data) > parseFloat(0)) {
        return data.toFixed(2).replace(/(\d{1,2})(?=(\d{3})+\.)/g, "$1,")
      } else {
        return data
      }
    }
  },
  created() {
    this.getInventory();
  },
  methods: {
    getInventory() {
      inventory().then((res) => {
        this.InventoryInfo = res.data.data;
        console.log(this.InventoryInfo, res);
      });
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5;color:#333333";
      } else {
        return "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.Inventory-home {
  position: relative;
  margin-top: 10px;
  padding: 10px;
  background: #ffffff;
  .title {
    font-size: 16px;
    color: #333333;
    i {
      color: #409eff;
    }
  }
  .right {
    position: absolute;
    top: 5px;
    right: 11px;
    display: flex;
    align-items: center;
    .date {
      margin-right: 10px;
      font-size: 14px;
      line-height: 14px;
      color: #333333;
    }
  }

  .list {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    ul {
      flex: 1;
      padding: 0;
      margin: 0;
      display: inline-block;
      border: 1px solid #eeeeee;
      margin: 0 1px 1px 1px;
      li {
        padding: 10px;
        list-style: none;
        font-size: 14px;
        line-height: 14px;
        color: #333333;
        border-bottom: 1px solid #f1f1f1;
        text-align: center;
        &:last-child {
          border-bottom: none;
        }
        &:first-child {
          background: #f1f1f1;
          font-weight: bold;
        }
      }
    }
    .cuurent {
      li {
        font-weight: bold;
      }
    }
  }
  .table-bottom {
    margin-bottom: 30px;
  }
  .dialog-right {
    position: absolute;
    right: 24px;
    top: 50px;
    font-size: 14px;
    font-weight: bold;
  }
  .button-right {
    float: right;
    margin: 15px 0;
  }
}
</style>
<style lang="scss">
.Inventory-home .el-dialog__header {
  background: #304156;
  padding: 10px;
  span {
    color: #fff;
  }
  .el-dialog__headerbtn {
    top: 15px;
    .el-dialog__close{
        color: #fff;
    }
  }
}
</style>
